<template>
    <div>
        <el-form   :model="model" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="部门编码" prop="Number">
                <el-input v-model="model.Number"></el-input>
            </el-form-item>

            <el-form-item label="部门名称" prop="Name">
                <el-input v-model="model.Name"></el-input>
            </el-form-item>
            <el-form-item label="更新时间" prop="UpdateTime">
                <el-date-picker v-model="model.UpdateTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
              <el-form-item label="创建时间" prop="CreateTime">
                 <el-date-picker v-model="model.CreateTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>
             <el-form-item label="显示顺序" prop="Sort">
           <template>
                 <el-input-number v-model="model.Sort" :step="1" :min="1" :max="10" ></el-input-number>
            </template>
            </el-form-item>
              <el-form-item label="联系电话" prop="Phone">
                <el-input v-model="model.Phone" type="text" ></el-input>
            </el-form-item>
           <el-form-item label="邮箱" prop="Email" >
                <el-input v-model="model.Email" type="text"></el-input>
            </el-form-item>
            <el-form-item label="部门状态" prop="Status">
                <el-radio-group v-model="model.Status">
                    <el-radio label="0">正常</el-radio>
                    <el-radio label="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item class="page-box-footer">
                <el-button type="primary" @click="submitForm">{{ isUpdate?'立即保存':'立即创建' }}</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        model: {
            require: true,
            type: Object
        },
        isUpdate: {
            require: true,
            type: Boolean
        },
      
    },
       
    data() {
          var validatePhone = ( rule,value, callback) => {
            var emalRule= /^\d{11}$/;
            if (!value) {
            return callback(new Error('请输入联系电话'));
            } else if (!emalRule.test(value)) {
            callback(new Error('请输入正确联系电话'));
            } else {
            callback();
            }
        };
       var validateEmail = ( rule,value, callback) => {
        var emalRule= /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,4})+$/;
        if (!value) {
         return callback(new Error('请输入邮箱'));
        } else if (!emalRule.test(value)) {
          callback(new Error('请输入正确的邮箱'));
        } else {
          callback();
        }
      };
        return {
          DepartmentList:[],
            rules: {
                Number: { required: true,message: '请输入部门编号',  trigger: 'blur' }, 
                Name: { required: true, message: '请输入部门名称', trigger: 'blur' },
                Sort: { required: true, message: '请输入显示顺序', trigger: 'blur' },
                Phone:  { validator: validatePhone, trigger: 'blur' }   ,
                Email:{ validator: validateEmail, trigger: 'blur' },
                UpdateTime: { required: true, message: '请选择更新时间', trigger: 'blur' },
                CreateTime: { required: true, message: '请选择创建时间', trigger: 'blur' },
            }
        }
    },
    
//     computed: {
//    isValidEmail() {
//       const emailPattern = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,4})+$/;
//       return emailPattern.test(this.Email);
//     },
//     isValidPhone() {
//       const regex = /^\d{11}$/; // 假设电话号码是11位数字
//       return regex.test(this.Phone);
//     }
//     },
    created(){
        this.getDepartmentAll();
    },  
    methods:{
        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if(this.isUpdate){
                        this.put();
                    }
                    else{
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
      },
      resetForm() {
        this.$refs['ruleForm'].resetFields();
      },
      add(){
        this.$http.postForm('/api/Department',{model:this.model},{loading:this.$loading()})
        .then(res=>{
            this.$emit('callback');
        })

      },
      //修改
      put(){
        this.$http.putForm('/api/Department',{model:this.model},{loading:this.$loading()})
		.then((res)=>{
            this.$emit('callback');
		})
      },

      getDepartmentAll(){
        this.$http.get('/api/Department/GetAll')
        .then(res=>{
            this.DepartmentList=res.Data ;
        })
      }
    }
}
</script>

<style></style>